【LV. 25】PixiJS青銅玩家：helper function - keyboard()（3）事件 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 25

Modern Web

PixiJS青銅玩家系列第 25 篇

【LV. 25】PixiJS青銅玩家：helper function - keyboard()（3）事件

14th鐵人賽 pixijs pixi

NoZ

團隊好想工作室 v6.0

2022-10-10 19:20:03

489 瀏覽

分享至

▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「You make the failure complete when you stop trying.」，PixiJS青銅玩家還卡關於自定義function階段，僅獲得經驗提昇等級。

▉ 主線任務：helper function - keyboard( )之事件處理

▍任務說明

今天將要寫一下JS的event。

▍作法

function keyboard(keyCode) {
  var key = {};
  key.code = keyCode;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

▍分析

主要是以下這個部份，因此想了解下JS的事件：

window.addEventListener(
    "keydown", key.downHandler.bind(key), false
);
window.addEventListener(
    "keyup", key.upHandler.bind(key), false
);

首先，先從事件綁定開始。

事件綁定（Event Handler）
大致分成３種方式：++Html inline atribute++、++DOM object property++、++addEventListener++

不過這裡主要提addEventListener，他一共有3個參數：
1. 事件名稱
  可參考HTML DOM Events，有很多event可以使用。
2. 事件處理
  第一個參數事件觸發時執行的function。
3. Boolean值
  決定是捕獲還是冒泡機制（預設為冒泡）
  捕獲：從最外面（根元素），往內（指定元素）找
  冒泡：從最裡面（指定元素），往外（根元素）找
所以回到PIXIJS的Treasure Hunter Game 中，以其中一個監聽事件為例：
```
window.addEventListener(
    "keydown", key.downHandler.bind(key), false
);
```
可以得知，當第一個參數「keydown」事件被觸發時，就會進入事件處理，執行第二個參數的函式「key.downHandler.bind(key)」，接著看到第三個參數傳入「false」（預設也是false，所以這裡有沒有放都沒差），而false的行為是冒泡，也就是由內而外觸發（true或false差別可以參考這篇stackoverflow-Why is 'false' used after this simple addEventListener function?）

再來，了解一下捕獲、冒泡，而這個就得提到事件流程「先捕獲再冒泡」。
事件流程（DOM Event Flow）
先了解在事件觸發後的事件流程是如何跑的（事件是如何被傳遞的）。
分成了3個階段（phase）：++captrue phase++、++target phase++、++bubbling phase++
- （1）captrue phase
  （inner > outer）
  root of the tree ---> target node
  DOM Event運作時，會從根節點觸發，一路傳遞到target節點上。
- （2）target phase
  （會觸發2次）
  到達target node的階段。
- （3）bubbling phase
  （outer > inner）
  target node ---> root of the tree
  DOM Event運作時，會從target節點觸發，一路傳遞到根節點上。
- 先捕獲，後冒泡
  如下圖所示，假如我們<td>上的click事件被觸發：
  1. capture phase
    會「先捕獲」，也就是從根節點Document出發，一路傳遞到此處的target<td>的過程。
```
Document -> <html> -> <body> -> <table> -> <tbody> -> <tr> -> <td>
```
  2. target phase
    到達target<td>時的階段。
  3. bubbling phase
    接著「後冒泡」，從target<td>出發，一路傳遞到跟節點Document的過程。
```
<td> -> <tr> -> <tbody> -> <table> -> <body> -> <html> -> Document
```
  （圖片來源：w3.org）